import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import { TabBar } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { ContentOutline, UserCircleOutline } from "antd-mobile-icons";
export default function selectCar() {
  let loc = useLocation();
  let nav = useNavigate();
  let [activeKey, setActiveKey] = useState("booklist");
  let [flag, setFlag] = useState(true);
  useEffect(() => {
    setFlag(true);
    let path = loc.pathname.split("/");
    if (path[1] === "") {
      setActiveKey("home");
    } else {
      setActiveKey(path[1]);
    }
    let arr = ["", "booklist", "listenstory", "mine"];
    if (!arr.includes(path[1])) setFlag(false);
  }, [loc]);

  let tabs = [
    {
      key: "home",
      title: "找绘本",
      icon: <span className="iconfont icon-saoliduhuiben"></span>,
    },
    {
      key: "booklist",
      title: "找书单",
      icon: <ContentOutline />,
    },
    {
      key: "listenstory",
      title: "听故事",
      icon: <span className="iconfont icon-shiting " />,
    },
    {
      key: "mine",
      title: "我的",
      icon: <UserCircleOutline />,
    },
  ];
  return (
    <TabBar
      style={{ display: flag ? "block" : "none" }}
      className={styles.navbar}
      activeKey={activeKey}
      safeArea
      onChange={(e) => {
        setActiveKey(e);
        if (e === "home") {
          nav("/");
        } else {
          nav("/" + e);
        }
      }}
    >
      {tabs.map((item) => {
        return (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        );
      })}
    </TabBar>
  );
}
